<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link href="/ajax/libs/jquery-layout/jquery.layout-latest.css"
      th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link href="/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css"
      th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i> 组织机构
                </div>
                <div class="box-tools pull-right">
                    <a type="button" class="btn btn-box-tool menuItem" href="/dept/listPage" target="iframe0"
                       title="管理机构"><i
                            class="fa fa-edit"></i></a>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新机构"><i
                            class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </div>
</div>

<div class="container-div ui-layout-center">
    <div class="row">
        <div class="col-sm-12 select-info">
            <form id="operlog-form">
                <div class="select-list gd">
                    <ul>
                        <li>
                            姓名：<input type="text" name="name"/>
                        </li>
                        <li>
                            手机号码：<input type="text" name="tel"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm"
                               onclick="$.table.search($('form').attr('id'))"><i class="fa fa-search"></i>&nbsp;搜索</a>

                            <a class="btn btn-warning btn-rounded btn-sm"
                               onclick="$.form.reset($('form').attr('id'))"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-info order-table">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">


    $(document).ready(function () {

        //layuout布局
        var myLayout = $("body").layout({applyDemoStyles: false});
        myLayout.sizePane("west", 180);

        btn.queryUserList();
        btn.treeDept();

        $("#btnRefresh").click(function () {
            btn.RefreshTree();
        });
    });

    var btn = {

        RefreshTree: function () {
            btn.treeDept();
        },
        treeDept: function () {
            var zTreeObj,
                setting = {
                    view: {
                        selectedMulti: false
                    },
                    callback: {
                        onClick: btn.zTreeOnClick
                    }

                },
                zTreeNodes = [
                    {
                        "name": "部门管理", open: true, children: initDeptData()
                    }
                ];

            function initDeptData() {
                var arr = new Array();
                $.ajaxSettings.async = false;
                $.post("/dept/ajaxlist", {}, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var treeData = {
                            "name": data[i].deptName,
                            "value": data[i].depId

                        }
                        arr.push(treeData);
                    }
                })
                return arr;
            }


            zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
        },
        queryUserList: function () {
            var options = {
                url: "/user/tableList",
                createUrl: "/user/toAdd",
                updateUrl: "/user/edit/{id}",
                removeUrl: "/user/del",
                sortName: "createTime",
                sortOrder: "desc",
                modalName: "用户",
                search: false,
                showExport: true,
                columns: [
                    {
                        field: 'uid',
                        title: '用户ID',
                        align:'center'
                    },
                    {
                        field: 'name',
                        title: '用户名称'
                    },
                    {
                        field: 'email',
                        title: '邮箱'
                    },
                    {
                        field: 'tel',
                        title: '手机'
                    },
                    {
                        field: 'dept',
                        title: '部门',
                        formatter: function (value, row, index) {
                            return row.deptPo.deptName
                        }
                    }
                ]
            };
            $.table.init(options);
        },
        zTreeOnClick: function (event, treeId, treeNode) {
            $.table.clickTree("dept", treeNode.value);
        }
    }
</script>
</body>

</html>